import { addMaintenanceRequest } from '@/apis/mainTenance'
import { storeAll } from '@/store'
import { layout } from '@/utils/contants'
import { Button, Form, Input, Select, message } from 'antd'
import { observer } from 'mobx-react-lite'
import React, { useState } from 'react'
import Upload from '@/components/upload'

const MainTenance: React.FC = () => {
	const [form] = Form.useForm()
	const [pic, setPic] = useState<string>('')
	const { mainTenance: { getMaintenances }, carsStore: { cars }, mainTenancer: { maintenancers } } = storeAll

	const onFinish = (value: any) => {
		value.picture = pic
		console.log(value);
		addMaintenanceRequest(value).then((res: any) => {
			form.resetFields()
			message.success(res.message)
			getMaintenances()
		})
	}

	return <div className="addMainTenanceWrap">
		<Form
			{...layout}
			name="nest-messages"
			onFinish={onFinish}
			form={form}
		>
			<Form.Item name={['cid']} label="车辆" rules={[{ required: true, message: '请选择车辆' }]}>
				<Select
					options={cars.map(item => ({ value: item.id, label: item.number }))}
				/>
			</Form.Item>
			<Form.Item name={['mid']} label="维修人员" rules={[{ required: true, message: '请选择维修人员' }]}>
				<Select
					options={maintenancers.map(item => ({ value: item.id, label: item.name }))}
				/>
			</Form.Item>
			<Form.Item name={['notes']} label="维修原因" rules={[{ required: true, message: '请输入维修原因' }]}>
				<Input />
			</Form.Item>
			<Form.Item label="图片">
				<Upload src={pic} getImgUrl={(url: string) => setPic(url)}></Upload>
			</Form.Item>
			<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
				<Button type="primary" htmlType="submit">
					添加
				</Button>
			</Form.Item>
		</Form>
	</div>
}

export default observer(MainTenance)